/*
* has 子元素改变父元素样式
* has-[selecter]:bg-green-500 子元素选中时父元素添加样式
* */
export default function Page(){
  return (
    <div className={'has-[:checked]:bg-green-500'}>
      <input className={'peer'} type={'checkbox'}/>
      <p className={'peer-checked:text-amber-500'}>千里之行始于足下1</p>
      <p>千里之行始于足下2</p>
      <p>千里之行始于足下3</p>
      <p className={'peer-checked:underline'}>千里之行始于足下4</p>
    </div>
  )
}
